<!--
 * @Description: 
 * @Version: 
 * @Autor: tc
 * @Date: 2022-04-07 14:41:47
 * @LastEditors: tc
 * @LastEditTime: 2022-04-07 17:32:08
-->
<!--
 * @Description: 
 * @Version: 
 * @Autor: tc
 * @Date: 2022-02-25 10:08:41
 * @LastEditors: tc
 * @LastEditTime: 2022-03-02 16:00:38
-->
<template>
    <el-dialog 
        :title="typename == '01'?'全景摄像头':'水尺摄像头'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="600px"
        top="1%"
        :before-close="onCancel"
        :close-on-click-modal="false"
    >
    <div class="ner_ty" v-loading="loading">
      <iframe :src="`${urldk}`" width="100%" height="100%" frameborder="0"></iframe>
        <!-- <video ref="videos" id='videoccc' style="width:100%;height:360px;" controls playsInline webkit-playsinline autoplay>
            <source :src="videoSrc" type="" />
        </video>
        <div class="handle" v-if="info.channelNo == '1'">
            <div class="handle-box {{topShow?'top-bg':'none'}} {{leftShow?'left-bg':'none'}} {{bottomShow?'bottom-bg':'none'}} {{rightShow?'right-bg':'none'}}">
                <div class="center" >
                    <div class="half-circle top-circle" @mousedown="touchMove" data-direction="8" @mouseup="touchEnd">
                    +
                    </div>
                    <div class="half-circle bottom-circle" @mousedown="touchMove" data-direction="9" @mouseup="touchEnd">
                    -
                    </div>
                </div>
                <div class="top active" @mousedown="touchMove" data-direction="0" @mouseup="touchEnd">
                    <div class="small-top"></div>
                </div>
                <div class="left active" @mousedown="touchMove" data-direction="2" @mouseup="touchEnd">
                    <div class="small-left"></div>
                </div>
                <div class="bottom active" @mousedown="touchMove" data-direction="1" @mouseup="touchEnd">
                    <div class="small-bottom"></div>
                </div>
                <div class="right active" @mousedown="touchMove" data-direction="3" @mouseup="touchEnd">
                    <div class="small-right"></div>
                </div>
            </div>
        </div> -->
    </div>
      
        <template #footer>
            <span class="dialog_footer">
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>

// import request from '../utils/request'
import axios from 'axios'
import EZUIKit from "../../static/EZUIKit-JavaScript/ezuikit.js"
export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        typename:{
            default:'01',
            type: String
        },
        videoUrl:{
            default:{}
        },
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.loading = true
                this.info = this.videoUrl
                this.videoSrc = this.videoUrl.liveAddress
                this.urldk = `https://open.ys7.com/jssdk/theme/h5/live.html?deviceSerial=${this.videoUrl.serial}&channelNo=${this.videoUrl.channelNo}&accessToken=${this.videoUrl.accessToken}&validCode=${this.videoUrl.validCode}`
                // this.$nextTick(()=>{
                //     let playerr = new EZUIKit.EZUIPlayer("videoccc")
                //     this.playervideo = playerr
                // })
                this.loading = false
            }else{
              this.loading = false
            }
        }
    },
    data(){
        return {
            loading:false,
            videoSrc: '',
            topShow: false,
            leftShow: false,
            bottomShow: false,
            rightShow: false,
            urldk:'',
            info: {},
            playervideo:null,
        }
    },
    methods:{
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
        touchEnd() {
            setTimeout(() => {
                this.topShow = false
                this.leftShow = false
                this.bottomShow =false
                this.rightShow = false
            }, 100);
        
        },
        touchMove(e) {
            this.loading = true
            let direction = e.currentTarget.dataset.direction
            if(direction === '0') {
                this.topShow = true
            } else if(direction === '2') {
                this.leftShow = true
            }
            else if(direction === '1') {
                this.bottomShow = true
            }
            else if(direction === '3') {
                this.rightShow = true
            }
            axios.post('https://open.ys7.com/api/lapp/device/ptz/start', {
                accessToken: this.info.accessToken,
                deviceSerial: this.info.serial,
                channelNo: this.info.channelNo,
                direction,
                speed: 1
            })
            .then(res => {
                if(res.data.code !== '200') {
                    this.$message.success(res.data.msg)
                    this.loading = false
                }
            })
            .catch(err => {
                this.loading = false
            })
            setTimeout(function () {
                //要延时执行的代码
                axios.post('https://open.ys7.com/api/lapp/device/ptz/start', {
                    accessToken: this.info.accessToken,
                    deviceSerial: this.info.serial,
                    channelNo: this.info.channelNo,
                })
                .then(res => {
                    this.loading = false
                })
                .catch(err => {
                    this.loading = false
                })
            }, 1000) //延迟时间 这里是1秒 
        },
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 80vh;
        overflow-y: auto;
        // padding-bottom: 80px;
    }
    .width100{
        width: 100%;
    }
    .ner_ty {
      width: 100%;
      height: 690px;
      .handle {
            margin: 40px;
        }
        .handle-box {
            position: relative;
            width: 220px;
            height: 220px;
            background: rgba(255,255,255,.8);
            box-shadow: 0 0 33px 4px rgb(0 0 0 / 15%);
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 100%;
            cursor: pointer;
            overflow: hidden;
            margin: auto;
            
        }
        .none {
            background-image: none;
        }
        .top-bg {
            background-image: linear-gradient(rgb(141, 204, 246) 0%, rgba(100, 143, 252, 0) 18%);
        }
        .left-bg {
            background-image: linear-gradient(90deg, rgb(141, 204, 246) 0%, rgba(100, 143, 252, 0) 18%);
        }
        .right-bg {
            background-image: linear-gradient(270deg, rgb(141, 204, 246) 0%, rgba(100, 143, 252, 0) 18%);
        }
        .bottom-bg {
            background-image: linear-gradient(0deg, rgb(141, 204, 246) 0%, rgba(100, 143, 252, 0) 18%);
        }

        .center {
            width: 60px;
            height: 60px;
            background: #fff;
            border: 2px solid #eee;
            border-radius: 100%;
            top: calc(50% - 30px);
            left: calc(50% - 30px);
            position: absolute;
        }
        .top {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            position: absolute;
            display: inline-block;
            left: calc(50% - 20px);
            top: 10px;
        }
        .small-top {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #0096FF;
            position: absolute;
            display: inline-block;
            left: calc(50% - 6px);
            top: 0;
        }
        .left {
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 20px solid transparent;
            position: absolute;
            display: inline-block;
            top: calc(50% - 20px);
            left: 10px
        }
        .small-left {
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid #0096FF;
            position: absolute;
            display: inline-block;
            top: calc(50% - 6px);
            left: 0
        }
        .bottom {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid transparent;
            position: absolute;
            display: inline-block;
            left: calc(50% - 20px);
            bottom: 10px;
        }
        .small-bottom {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #0096FF;
            position: absolute;
            display: inline-block;
            left: calc(50% - 6px);
            bottom: 0;
        }
        .right {
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
            position: absolute;
            display: inline-block;
            top: calc(50% - 20px);
            right: 10px;
        }
        .small-right {
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #0096FF;
            position: absolute;
            display: inline-block;
            top: calc(50% - 6px);
            right: 0;
        }
        .half-circle {
            height: 50%;
            text-align: center;
            color: #0096FF;
            vertical-align: middle;
            font-size: 30px;
        }
        .top-circle {
            border-bottom: 1px solid #eee;
        }
    }
    .dialog_footer{
      display: flex;
      justify-content: center;
      // position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      z-index: 1;
    }
    ::v-deep .tree_select .el-tree-node__content{
      height: 38px;
    }

</style>

